<template>
  <!-- 表单 -->
  <el-form
    label-width="100px"
    :model="formLabelAlign"
    style="max-width: 460px"
    :rules="rules"
  >
    <el-form-item label="作者" prop="author">
      <el-input v-model="formLabelAlign.author" />
    </el-form-item>
    <el-form-item label="标题" prop="title">
      <el-input v-model="formLabelAlign.title" />
    </el-form-item>
  </el-form>

  <!-- 富文本编辑器 -->
  <div style="border: 1px solid #ccc" class="box">
    <Toolbar
      style="border-bottom: 1px solid #ccc"
      :editor="editorRef"
      :defaultConfig="toolbarConfig"
      :mode="mode"
    />
    <Editor
      style="height: 300px; overflow-y: hidden"
      v-model="valueHtml"
      :defaultConfig="editorConfig"
      :mode="mode"
      @onCreated="handleCreated"
    />
  </div>

  <el-button type="" @click="resetFn">取消</el-button>
  <el-button type="primary" @click="updateText">上传</el-button>
</template>

<script setup lang="ts">

import "@wangeditor/editor/dist/css/style.css"; // 引入 css

import { onBeforeUnmount, ref, shallowRef, onMounted,reactive } from "vue";
import { Editor, Toolbar } from "@wangeditor/editor-for-vue";
import request from "@/network/request";

import type { FormRules } from 'element-plus'

interface RuleForm {
  author: string
  title: string
}

let mode = "default"; // 或 'simple'

// 编辑器实例，必须用 shallowRef
const editorRef = shallowRef();

// 内容 HTML
const valueHtml = ref("<p>hello</p>");

// 模拟 ajax 异步获取内容
onMounted(() => {
  setTimeout(() => {
    valueHtml.value = "<p>8888888888888</p>";
  }, 1500);
});

const toolbarConfig = {};
const editorConfig = { placeholder: "请输入内容..." };

// 组件销毁时，也及时销毁编辑器
onBeforeUnmount(() => {
  const editor = editorRef.value;
  if (editor == null) return;
  editor.destroy();
});

const handleCreated = (editor:any) => {
  editorRef.value = editor; // 记录 editor 实例，重要！
};

const rules = reactive<FormRules<RuleForm>>({
  author: [
    { required: true, message: '请输入作者名', trigger: 'blur' },
    { min: 2, max: 10, message: '长度在2-10之间', trigger: 'blur' },
  ],
  title: [
    { required: true, message: '请输入文章标题', trigger: 'blur' },
    { min: 1, max: 50, message: '长度在1-50之间', trigger: 'blur' },
  ],
})

const formLabelAlign = reactive({
  author: JSON.parse(sessionStorage.getItem("userInfor") as string).username,
  title: '',
  content: '',
})

const updateText = () => {
  // 获取富文本编辑器里面的内容
  console.log(valueHtml.value);
  formLabelAlign.content=valueHtml.value;

  // 调用接口
  request({
    url: "/article/update",
    method: "post",
    data: formLabelAlign,
  }).then((res) => {
    console.log("返回结果", res);
  });
};

// 取消
const resetFn=()=>{
  console.log("quxiao")
  formLabelAlign.author=JSON.parse(sessionStorage.getItem("userInfor") as string).username,
  formLabelAlign.title="";
  formLabelAlign.content="";
  valueHtml.value="";

}
</script>

<style scoped>
.box {
  height: 400px;
  overflow-y: scroll;
}
</style>

<!-- axios是对原生ajax的封装
  axios请求：
  1.get  params=> url+参数
  2.post  params=> url+参数
          data=>参数是放在请求体内部，大小无限制

-->
